// import React from "react";
// // import { Button, Box, useColorMode, Text, useColorModeValue, LightMode } from '@chakra-ui/core'
// import { chakra } from '@chakra-ui/core'

// // 颜色模式
// // function App() {
// //   // colorMode 当前颜色模式 light(浅色模式) dark(暗色模式)
// //   // toggleColorMode 修改颜色模式的方法
// //   const {colorMode, toggleColorMode} = useColorMode()
// //   // 会根据当前颜色模式来返回不同的颜色
// //   const bgColor = useColorModeValue('tomato', 'skyblue')
// //   return <Box w='200px' h='100px' bgColor={bgColor}>
// //     <Text>{ colorMode }</Text>
// //     <LightMode>
// //       {/* 让按钮强制在浅色模式下 */}
// //       <Button onClick={toggleColorMode}>切换颜色模式</Button>
// //     </LightMode>
// //   </Box>
// // }

// // 主题颜色
// // function App() {
// //   return <Box>
// //     {/* 优先查看主题颜色中是否有这个颜色 如果有这获取颜色显示 */}
// //     <Box w='200px' h='100px' bgColor="blue.500"></Box>
// //     {/* 如果主题颜色中没有 判断这个是否本身是颜色 如果是则显示 */}
// //     <Box w='200px' h='100px' bgColor="tomato"></Box>
// //   </Box>
// // }

// // 间距
// // function App() {
// //   return <Box w="2xs" h="10" bgColor="tomato" mt="6"></Box> // 5 => 1.25rem
// // }

// // Breakpoints
// // function App() {
// //   return <Box mt="6" w={["100px", "200px", "300px", "400px", "500px"]} h="10" bgColor="tomato"></Box>
// // }

// // const LaGouButton =  chakra('button', {
// //   baseStyle: {
// //     borderRadius: 'lg'
// //   },
// //   sizes: {
// //     sm: {
// //       px: '3',
// //       py: '1',
// //       fontSize: '12px'
// //     },
// //     md: {
// //       px: '4',
// //       py: '2',
// //       fontSize: '14px'
// //     }
// //   },
// //   variants: {
// //     primary: {
// //       bgColor: 'blue.500',
// //       color: 'white'
// //     },
// //     danger: {
// //       bgColor: 'red.500',
// //       color: 'white'
// //     }
// //   }
// // })

// // // 选择默认样式
// // LaGouButton.defaultProps = {
// //   size: 'sm',
// //   variant: 'primary'
// // }

// const LaGouButton = chakra('button', {
//   themeKey: 'LaGouButton'
// });

// function App() {
//   return <div>
//     <LaGouButton>LaGouButton按钮</LaGouButton>
//   </div>
// }

// export default App;

import React from "react";
import { chakra } from '@chakra-ui/core';

const LaGouButton = chakra('button', {
  themeKey: 'LaGouButton'
});

function App() {
  return <div>
    <LaGouButton size="md" variant="danger">我是按钮</LaGouButton>
  </div>;
}

export default App;
